<template>
  <div class="prompt-container">
    <div class="prompt-box">
      <div class="prompt-title">
        <div style="display: flex; align-items: center">
          <svg-icon
            icon-class="rergin"
            style="width: 16px; height: 16px; margin-right: 8px"
          />
          <div>医院注册</div>
        </div>
        <el-icon color="#fff" @click="cancellation" size="16"><Close /></el-icon>
      </div>
      <div class="prompt-content">
        <el-form ref="ruleFormRef" hide-required-asterisk status-icon :rules="rules" :model="ruleForm" class="demo-ruleForm">
          <el-form-item label="注册码" class="zhucema" prop="zcm">
            <el-input v-model="ruleForm.zcm" :rows="6" placeholder="请输入注册码" type="textarea" />
          </el-form-item>
          <el-form-item label="账套号" class="zhangtao" prop="ztm">
            <el-input v-model="ruleForm.ztm" :rows="4" placeholder="请输入账套号" type="textarea" />
          </el-form-item>
          <div class="mabiao">
            <el-form-item label="导入指定账套码表" prop="zdzt">
              <el-select
                v-model="ruleForm.zdzt"
                suffix-icon="CaretBottom"
                placeholder="请选择"
              >
                <el-option v-for="(item,i) in hospitol" :label="item.ztm" :value="item.ztid" :key="i" />
              </el-select>
            </el-form-item>
            <el-form-item label="密码验证" prop="mm">
                <el-input style="width:260px" v-model="ruleForm.mm" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      
      <div class="prompt-footer">
        <el-button style="width:72px" @click="cancellation">取消</el-button>
        <el-button style="width:72px" type="primary" @click="cancelPrompt">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const emit = defineEmits(['cancelPrompt','cancellation'])
const rules = ref({
  zcm: [{ required: true, trigger: "blur", message: "请输入您的注册码" }],
  ztm: [{ required: true, trigger: "blur", message: "请输入您的账套号" }],
  mm: [{ required: true, trigger: "blur", message: "请输入您的注册密码" }],
  // zdzt: [{ required: true, trigger: "change", message: "请选择账套码表" }]
})
const ruleForm = ref({
  zcm:'',
  ztm:'',
  mm:'',
  zdzt:''
});
const hospitol = ref([])


const cancelPrompt = () => {
  proxy.$refs.ruleFormRef.validate(async valid => {
    if(valid){
      const res = await window.xinpuHttpApi('000002',{"zcm":ruleForm.value.zcm,"ztm":ruleForm.value.ztm,"mm":ruleForm.value.mm,"zdzt":ruleForm.value.zdzt})
      console.log(res);
      if(res.flag){
        emit('cancelPrompt')
        window.xinpuMessageOpen('success','医院注册成功')
      }else{
        window.xinpuMessageOpen('error',res.codeMsg)
      }
    }
  })
};

const cancellation = () => {
    emit('cancellation')
}

const getHospitol = (async() =>{
  const res = await window.xinpuHttpApi('000001',null)
  if(res && res.Flag){
    hospitol.value = res.ReContent
    console.log(hospitol.value);
    ruleForm.value.zdzt = hospitol.value[0].ztid
  }else{
    if(res && res.CodeMsg){
      window.errorMessageOpen(
        "账套获取失败",
        res.CodeMsg
      );
    }else{
      window.errorMessageOpen(
        "账套获取失败",
        res
      );
    }
  }
})

onMounted(() => {
  getHospitol()
});
defineExpose({
  cancelPrompt,
});
</script>

<style lang="scss" scoped>
.mabiao{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.zhangtao{
    :deep(.el-textarea__inner) {
        height: 96px !important; /* 设置具体的高度 */
    }
}
.zhucema{
    :deep(.el-textarea__inner) {
        height: 128px !important; /* 设置具体的高度 */
    }
}
:deep(.el-input__inner) {
  height: 32px !important;
}
:deep(.el-select__wrapper) {
  width: 260px !important;
  height: 32px !important;
}
.prompt-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px 4px 4px 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.prompt-box {
  background-color: #fff;
  width: 800px;
  border-radius: 2px;
  box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
    0px 8px 20px rgba(0, 0, 0, 0.08);
  .prompt-title {
    font-size: 18px;
    color: #303133;
    width: 100%;
    height: 40px;
    padding: 0 16px;
    box-sizing: border-box;
    background: #697786;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #ffffff;
  }
  .prompt-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    .demo-ruleForm{
        width: 100%;
    }
  }
  .detail-info{
    padding: 0 24px 24px 24px;
    box-sizing: border-box;
    .detail-info-top{
        display: flex;
        align-items: flex-end;
        color: #333333;
        .detail-info-top-title{
            font-size: var(--size);
        }
    }
    .detail-info-content{
        font-size: var(--size);
        color: #999999;
        width: 100%;
        margin-top: 16px;
        max-height: 188px;
        overflow-y: auto;
    }
  }
}

button {
  padding: 8px 15px;
  margin: 5px;
  cursor: pointer;
}
.prompt-footer {
  width: 100%;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid #E0E0E0;
  padding-right: 16px;
  box-sizing: border-box;
}
</style>
<style>
.el-popper{
    z-index: 100000 !important;
}
</style>